<template>
    <div class="home-wrap">
        <div class="line-grade-box">
            <!-- 搜索区/banner -->
            <div :style='"background: url(" + homeTopBg + ") no-repeat top;"' class="search-area">
                <div class="search-box">
                    <div @click="handleToSearch" class="search-input">
                        <img class="search-icon" :src="searchIcon" alt="">
                        <div class="search-text">输入商品名称或类目</div>
                        <!-- <div class="search-btn">搜索</div> -->
                    </div>
                    <img @click="handleToKefu" class="kefu-icon" :src="kefuIcon" alt="">
                    <img @click="handleToNotice" class="help-icon" :src="helpIcon" alt="">
                </div>
            </div>

            <!-- 轮播区 -->
            <van-swipe class="my-swipe" :autoplay="6000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in banners" :key="index" @click="handleToParams(item)">
                    <div :style='"background: url(" + item.image_url + ") no-repeat center"' class="banner-li">
                    </div>
                </van-swipe-item>
            </van-swipe>

            <div class="line"></div>

            <!-- tab区 -->
            <van-tabs v-model="tabCurrent" @change="handleTabChange" title-active-color="#333333"
                title-inactive-color="#333333" line-width="">
                <van-tab v-for="(item, index) in tabList" :key="index" :title="item.name" :title-style="{
                    fontWeight: 500,
                    fontSize: '16px'
                }">

                </van-tab>
            </van-tabs>

            <!-- 类别标签 -->
            <div class="type-list">
                <!-- 推荐专区 -->
                <!-- <template v-if="tabCurrent === 0">
					<div v-for="(item) in shortcuts" :key="item.id" @click="handleToArea(item)"
						class="type-li active-btn">
						<img class="type-icon" :src="item.image_url" alt="">
						<div class="type-name">{{ item.name }}</div>
					</div>
				</template> v-else-->
                <template>
                    <!-- 其他类目 -->
                    <div v-for="(item) in typeList" :key="item.id" @click="handleToCate(item)"
                        class="type-li active-btn">
                        <img class="type-icon" :src="item.icon" alt="">
                        <div class="type-name">{{ item.name }}</div>
                    </div>
                </template>
            </div>

        </div>
        <!-- 推荐位 -->
        <!-- <div v-if="tabCurrent === 0" class="recommend-box">
			<div @click="handleToGold" class="gold-recommend">
				<div class="gold-top">
					<img class="gold-recommend-icon-1" :src="recommendIcon1" alt="">
				</div>

				<van-swipe class="gold-swipe" vertical :show-indicators="false" :autoplay="5000">
					<van-swipe-item v-for="(item, index) in goods_jptj_index" :key="index">
						<div class="gold-bottom">
							<div class="gold-bottom-good">
								<img class="good-main" :src="goods_jptj[index * 2].cover_url" alt="">
								<div class="good-desc">
									<div class="good-name">{{ goods_jptj[index * 2].name }}</div>
									
								</div>
							</div>
							<div class="gold-bottom-good">
								<img class="good-main" :src="goods_jptj[index * 2 + 1].cover_url" alt="">
								<div class="good-desc">
									<div class="good-name">{{ goods_jptj[index * 2 + 1].name }}</div>
								
								</div>
							</div>
						</div>
					</van-swipe-item>
				</van-swipe>


			</div>
			<div class="today-good">
				<div @click="handleToShop" class="gold-shop">
					<div class="gold-top">
						<img class="gold-recommend-icon-2" :src="recommendIcon2" alt="">
					</div>

					<van-swipe class="today-swipe" vertical :show-indicators="false" :autoplay="autoplayTime">
						<van-swipe-item v-for="(item, index) in shop_jxhd" :key="index">
							<div class="today-bottom-good">
								<img class="today-main" :src="item.cover_url" alt="">
								<div class="today-desc">
									<div class="good-name">{{ item.name }}</div>
									<div class="good-sale">{{ item.order_quantity | saleWordFilter }}人买过</div>
								</div>
							</div>
						</van-swipe-item>
					</van-swipe>
				</div>
				<div @click="handleToNew" class="gold-today">
					<div class="gold-top">
						<img class="gold-recommend-icon-3" :src="recommendIcon3" alt="">
					</div>
					<van-swipe class="today-swipe" vertical :show-indicators="false" :autoplay="autoplayTime">
						<van-swipe-item v-for="(item, index) in goods_jrsx" :key="index">
							<div class="today-bottom-good">
								<img class="today-main" :src="item.cover_url" alt="">
								<div class="today-desc">
									<div class="good-name">{{ item.name }}</div>
									<div class="good-sale">¥{{ item.price }}</div>
								</div>
							</div>
						</van-swipe-item>
					</van-swipe>

				</div>
			</div>
		</div> -->


        <!-- <div class="banner1" >
			<img :src="banner1" alt="" @click="goSelection">
		</div> -->
        <van-swipe class="my-swipe1 banner1" style="margin-top: 0.2rem;" :show-indicators="false" :autoplay="4000"
            indicator-color="white" v-if="tabCurrent === 0 && picture_hdzq2.length > 0">
            <van-swipe-item v-for="(item, index) in picture_hdzq2" :key="index" @click="handleToParams(item)">
                <img :src="item.image_url" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 花朵抵扣 -->
        <!-- <div class="zhuan_qu" v-if="tabCurrent === 0&& goods_syzq.length>0">
			<div class="private">
				<div class="gold-top">
					<img class="gold-recommend-icon-4" :src="recommendIcon4" alt="">
					<div @click="handleToSelection('goods_syzq')">查看更多<van-icon name="arrow" /></div>
				</div>
				<div class="banner2">
					<div class="private_item" v-for="(item, index) in goods_syzq" :key="index" @click="handleToItem(item.id)">
						<img :src="item.cover_url" alt="">
						<div>{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div> -->

        <!-- <div class="zhuan_qu" v-if="tabCurrent === 0&& goods_jfzq.length>0">
			<div class="private">
				<div class="gold-top">
					<img class="gold-recommend-icon-5" :src="recommendIcon5" alt="">
					<div @click="handleToSelection('goods_jfzq')">查看更多<van-icon name="arrow" /></div>
				</div>
				<div class="banner2">
					<div class="private_item" v-for="(item, index) in goods_jfzq" :key="index" @click="handleToItem(item.id)">
						<img :src="item.cover_url" alt="">
						<div>{{ item.name }}</div>
					</div>
					<div class="private_item" v-if="goods_jfzq.length<3">
					</div>
				</div>
			</div>
		</div> -->
        <div class="line"></div>
        <van-swipe class="my-swipe1 banner1" :show-indicators="false" :autoplay="4000" indicator-color="white"
            v-if="tabCurrent === 0">
            <van-swipe-item v-for="(item, index) in picture_hdzq" :key="index" @click="handleToParams(item)">
                <img :src="item.image_url" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 商品列表 -->
        <div :style="{ marginTop: tabCurrent !== 0 ? '-1.4rem' : '-1.8rem' }">
            <van-list v-model="loadingPage" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
                @load="ajaxGoodList">

                <div v-if="finished && !list.length" class="empty-good">
                    <van-empty description="暂无商品" />
                </div>

                <!-- 商品列表 -->
                <!-- 商品列表 -->
                <div class="good-ul">
                    <goodItem v-for="(item, index) in list" :key="index" :item="item"></goodItem>
                </div>

            </van-list>
        </div>


        <!-- 归属地 -->
        <!-- <myLocation ref="myLocationRef" :adcode="adcode" :addressText="addressText" :latitude="latitude"
			:longitude="longitude">
		</myLocation> -->


        <footTab :current="1"></footTab>
    </div>
</template>

<script>
import footTab from '@/components/foot-tab';
import {
    homeTopBg, searchIcon, kefuIcon, helpIcon, banner,
    recommendIcon1, recommendIcon2, recommendIcon3, recommendIcon4, recommendIcon5, banner1
} from '@/tool/static-img';
import { HOME_DATA2, TJZQ, CATE_LIST, GOOD_LIST } from '@/api/home';
import { USERDETAIL } from '@/api/mine';
import goodItem from '../home/components/good-item.vue';
// import myLocation from './components/my-location';
import { bannerToParams } from '@/tool/methods';
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    components: {
        footTab,
        // myLocation,
        goodItem
    },
    data() {
        return {
            homeTopBg, searchIcon, kefuIcon, helpIcon, banner,
            recommendIcon1, recommendIcon2, recommendIcon3, banner1, recommendIcon4, recommendIcon5,
            autoplayTime: 7000,
            banners: [],
            tabList: [],

            tabCurrent: 0,
            // 用户id
            uid: '',
            nickname: '',

            // 推荐专区
            shortcuts: [],
            goods_jptj: [],
            goods_jrsx: [],
            shop_jxhd: [],
            goods_syzq: [],
            goods_jptj_index: 0,
            picture_hdzq: [],
            goods_jfzq: [],
            picture_hdzq2: [],
            // 分类图片
            typeList: [],

            // 分页
            page: 1,
            pageSize: 20,
            list: [],
            loadingPage: false,
            finished: false,

            // 归属地
            adcode: '',
            addressText: '',
            latitude: '',
            longitude: ''

        }
    },
    created() {
        // 首页数据
        this.getHomeData();

        // 推荐专区
        this.getRecommend();

        // 延迟2s继续
        setTimeout(() => {
            this.autoplayTime = 5000;
        }, 2000)
        localStorage.removeItem('content')
        // 所属区域
        // this.getMyArea();
        localStorage.removeItem('goodmsg')

    },
    activated() {
        document.title = '商城';
    },
    methods: {
        // 客服
        handleToKefu() {
            const fromUrl = window.location.href;

            const clientId = this.uid;
            if (clientId && this.nickname) {
                // 用户
                const otherParams = JSON.stringify({
                    "nickName": this.nickname
                })
                window.location.href = `https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&clientId=${clientId}&otherParams=${otherParams}&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
            } else {
                // 游客
                window.location.href = `https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
            }
        },
        // 所属区域
        getMyArea() {
            const token = localStorage.getItem('token');
            if (!token) {
                return
            }
            this.$http.get(USERDETAIL).then(res => {
                const {
                    data
                } = res;

                this.uid = data.uid;
                this.nickname = data.nickname;

                if (data.location_status === 0) {
                    // 未设置所属区域 - 去定位
                    this.getLocation();
                }
            })
        },
        // 未设置所属区域 - 去定位
        getLocation() {
            var _this = this;

            window._AMapSecurityConfig = {
                securityJsCode: "638b1bb3fefe982cdf2a8db2cf2a7846",
            };

            // 加载高德地图的定位模块
            AMapLoader.load({
                key: 'ac8b3896464d5d2b7735e62100bee1d0', // 在此处替换为你的高德地图APIKey
                version: '2.0',
                plugins: ['AMap.Geolocation', 'AMap.Geocoder'] // 加载 Geolocation 插件
            }).then((AMap) => {
                const geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, // 是否使用高精度定位，默认:true
                    useNative: true, // 是否使用安卓定位sdk用来进行定位，需要安卓端sdk配合
                    timeout: 5000,
                    needAddress: true
                });

                var geocoder = new AMap.Geocoder({
                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                    city: '010'
                })

                geolocation.getCurrentPosition((status, result) => {
                    console.log(result, '定位信息')

                    if (status === 'complete') {
                        _this.latitude = result.position.lat;
                        _this.longitude = result.position.lng;

                        // 如果获取到地址信息
                        if (result.addressComponent && result.addressComponent.adcode) {
                            const addressComponent = result.addressComponent;
                            _this.adcode = addressComponent.adcode;
                            _this.addressText = addressComponent.province + addressComponent.city + addressComponent.district;
                            _this.$refs['myLocationRef'].show = true;
                        } else {
                            // 逆转码
                            let lnglat = [_this.longitude, _this.latitude]
                            geocoder.getAddress(lnglat, function (status, result) {
                                console.log(result, '逆编码信息')
                                if (status === 'complete' && result.info === 'OK') {
                                    const addressComponent = result.regeocode.addressComponent;
                                    _this.adcode = addressComponent.adcode;
                                    _this.addressText = addressComponent.province + addressComponent.city + addressComponent.district;
                                    _this.$refs['myLocationRef'].show = true;
                                }
                            })
                        }

                    } else {
                        onError(result);
                    }
                });
            }).catch((e) => {
                console.error('地图加载失败:', e);
            });
            // 定位出错的回调函数
            function onError(data) {
                _this.$toast('定位失败：请检查是否开通定位权限')
            }
        },
        // 首页数据
        getHomeData() {
            this.$http.get(HOME_DATA2)
                .then(res => {
                    const {
                        data
                    } = res;
                    this.banners = data.banners;
                    this.tabList = data.navigations;
                    this.$http.get(CATE_LIST + data.navigations[0].jump_params)
                        .then(res => {
                            const {
                                data
                            } = res;

                            this.typeList = data;
                        })
                })
        },
        // 私域甄选
        goSelection() {
            this.$router.push({
                name: 'selection',
            })
        },
        // 去商品
        handleToItem(id) {
            localStorage.setItem('goodmsg', 1)
            this.$router.push({
                name: 'good',
                query: {
                    id: id
                }
            })

        },
        // 轮播跳转
        handleToParams(item) {
            bannerToParams(item)
        },
        // 分类
        handleToCate(item) {
            localStorage.removeItem('searchKey');
            this.$router.push({
                name: 'goodList',
                query: {
                    cate_id: item.id
                }
            })
        },
        //私域
        handleToSelection(id) {

            this.$router.push({
                name: 'selection',
                query: {
                    msg: id
                }
            })
        },
        // 推荐专区
        getRecommend() {
            this.$http.get(TJZQ)
                .then(res => {
                    const {
                        data
                    } = res;


                    this.shortcuts = data.shortcuts;
                    this.goods_jptj_index = Math.ceil(data.goods_jptj.length / 2);
                    this.goods_jptj = data.goods_jptj;
                    this.goods_jrsx = data.goods_jrsx;
                    this.shop_jxhd = data.shop_jxhd;
                    this.goods_syzq = data.goods_syzq
                    this.picture_hdzq = data.picture_hdzq
                    this.picture_hdzq2 = data.picture_hdzq2
                    this.goods_jfzq = data.goods_jfzq
                })
        },
        // 去搜索页
        handleToSearch() {
            this.$router.push({
                name: 'search'
            })
        },
        // 去公告列表 
        handleToNotice() {
            this.$router.push({
                name: 'notice'
            })
        },
        // 类目切换
        handleTabChange(index) {
            // 分页
            this.resetInit();


            // if (!index) {
            //     return
            // }

            let id = this.tabList[index].jump_params;

            if (!id) {
                this.typeList = [];
                return
            }

            // return
            console.log(id, 'id');
            
            this.$http.get(CATE_LIST + id)
                .then(res => {
                    const {
                        data
                    } = res;

                    this.typeList = data;
                })
        },
        // 专区
        handleToArea(item) {
            if (item.name == '全部') {
                this.$router.push({
                    name: 'lifeArea'
                })
            } else {
                this.$toast('暂未开放')
            }
        },
        // 金榜推荐
        handleToGold() {
            this.$router.push({
                name: 'newArea',
                query: {
                    type: 'gold'
                }
            })
        },
        // 新人专区
        handleToNew() {
            this.$router.push({
                name: 'newArea',
                query: {
                    type: 'new'
                }
            })
        },
        // 精选好店
        handleToShop() {
            this.$router.push({
                name: 'goldShop'
            })
        },
        resetInit() { //重置
            this.page = 1;
            this.list = [];
            this.finished = false;

            this.loadingPage = true;
            this.ajaxGoodList()
        },
        // 列表请求
        ajaxGoodList() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;

            if (this.tabCurrent) {
                params['cate_id'] = this.tabList[this.tabCurrent].jump_params;
            }


            this.$http.post(GOOD_LIST, params)
                .then(res => {
                    const {
                        list
                    } = res.data;

                    if (list && list.length) {
                        this.page++;
                        this.list = this.list.concat(list);
                        // 加载状态结束
                        this.loadingPage = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        }

    }


}
</script>

<style lang="scss" scoped>
.home-wrap {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    box-sizing: border-box;

    .line-grade-box {
        padding-bottom: 1.72rem;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 82%, #F5F5F5 100%);
    }

    .search-area {
        width: 100%;
        height: 2.72rem;
        padding-top: 0.08rem;
        box-sizing: border-box;
        background-size: cover !important;

        .search-box {
            display: flex;
            align-items: center;
            width: 6.86rem;
            height: 0.72rem;
            margin: auto;

            .search-input {
                position: relative;
                display: flex;
                align-items: center;
                width: 5.34rem;
                height: 0.72rem;
                border-radius: 0.42rem;
                background-color: rgba(255, 255, 255, 0.3);
                ;

                .search-icon {
                    width: 0.32rem;
                    height: 0.32rem;
                    margin-left: 0.28rem;
                    margin-right: 0.16rem;
                }

                .search-text {
                    height: 0.4rem;
                    line-height: 0.4rem;
                    font-weight: 400;
                    font-size: 0.28rem;
                    color: #fff;
                }

                .search-btn {
                    position: absolute;
                    right: 0.06rem;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1.12rem;
                    height: 0.6rem;
                    margin-left: 0.88rem;
                    font-weight: 400;
                    font-size: 0.28rem;
                    color: #ffffff;
                    border-radius: 0.3rem;
                    background: linear-gradient(135deg, #FF5851 0%, #E9011B 100%);
                }
            }

            .kefu-icon {
                width: 0.48rem;
                height: 0.48rem;
                margin-left: 0.32rem;
            }

            .help-icon {
                width: 0.48rem;
                height: 0.48rem;
                margin-left: 0.24rem;
            }
        }
    }

    .my-swipe {
        width: 7.02rem;
        height: 2.4rem;
        margin: auto;
        margin-top: -1.64rem;

        .banner-li {
            width: 100%;
            height: 100%;
            border-radius: 0.16rem;
            background-size: cover !important;
        }
    }

    ::v-deep .van-tabs__line {
        width: 32px;
        height: 7px;
        bottom: 32px;
        background: linear-gradient(90deg, #1B68E3 0%, rgba(24, 102, 227, 0) 100%) !important;
    }

    ::v-deep .van-tabs--line .van-tabs__wrap {
        height: 54px;
    }

    .type-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0.45rem;

        .type-li {
            margin-left: 0.4rem;
            margin-bottom: 0.16rem;

            &:nth-child(5n + 1) {
                margin-left: 0;
            }

            .type-icon {
                display: block;
                width: 1rem;
                height: 1rem;
            }

            .type-name {
                width: 1rem;
                height: 0.34rem;
                font-family: PingFangSC, PingFang SC;
                line-height: 0.34rem;
                font-weight: 400;
                font-size: 0.24rem;
                color: #333333;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
            }
        }
    }

    .gold-swipe {
        height: 2.88rem;
    }

    .recommend-box {
        display: flex;
        width: 7.02rem;
        margin: auto;
        margin-top: -1.48rem;

        .gold-recommend {
            width: 3.44rem;
            height: 3.44rem;
            background-color: #ffffff;
            border-radius: 0.16rem;
            overflow: hidden;

            .gold-bottom {
                position: relative;
                height: 2.88rem;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    width: 3.02rem;
                    height: 1px;
                    background: #F2F4F5;
                }

                .gold-bottom-good {
                    display: flex;
                    align-items: center;
                    height: 1.44rem;

                    .good-main {
                        width: 1.08rem;
                        height: 1.08rem;
                        margin-left: 0.2rem;
                        border-radius: 0.16rem;
                    }

                    .good-desc {
                        height: 1.08rem;
                        margin-left: 0.12rem;
                        font-family: PingFangSC, PingFang SC;

                        .good-name {
                            height: 0.34rem;
                            width: 1.82rem;
                            margin-top: 0.08rem;
                            margin-bottom: 0.22rem;
                            line-height: 0.34rem;
                            font-weight: 400;
                            font-size: 0.24rem;
                            color: #333333;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            word-break: break-all;
                        }

                        .good-sale {
                            height: 0.28rem;
                            margin-left: 0.06rem;
                            line-height: 0.28rem;
                            font-size: 0.2rem;
                            font-weight: 400;
                            color: #FE7900;
                        }
                    }
                }
            }
        }

        .gold-top {
            display: flex;
            align-items: center;
            width: 100%;
            height: 0.56rem;
            border-radius: 0.16rem 0.16rem 0 0;
            background: linear-gradient(180deg, rgba(255, 233, 233, 0.71) 0%, #FFFFFF 100%);
        }

        .gold-recommend-icon-1 {
            width: .9rem;
            height: 0.24rem;
            margin-left: 0.28rem;
        }

        .gold-recommend-icon-2 {
            width: 1.18rem;
            height: 0.24rem;
            margin-left: 0.28rem;
        }

        .gold-recommend-icon-3 {
            width: 1.48rem;
            margin-left: 0.28rem;
        }

        .today-swipe {
            height: 1.1rem;
        }

        .today-good {
            margin-left: 0.14rem;

            .gold-shop {
                width: 3.44rem;
                height: 1.66rem;
                margin-bottom: 0.12rem;
                border-radius: 0.16rem;
                background-color: #ffffff;

                .today-bottom-good {
                    display: flex;
                    height: 1.1rem;

                    .today-main {
                        width: 0.96rem;
                        height: 0.96rem;
                        margin-left: 0.2rem;
                        border-radius: 0.16rem;
                    }

                    .today-desc {
                        height: 0.96rem;
                        margin-left: 0.1rem;

                        .good-name {
                            height: 0.34rem;
                            width: 1.92rem;
                            margin-top: 0.08rem;
                            margin-bottom: 0.14rem;
                            line-height: 0.34rem;
                            font-weight: 400;
                            font-size: 0.24rem;
                            color: #333333;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            word-break: break-all;
                        }

                        .good-sale {
                            height: 0.28rem;
                            margin-left: 0.06rem;
                            line-height: 0.28rem;
                            font-size: 0.2rem;
                            font-weight: 400;
                            color: #FE7900;
                        }
                    }
                }

            }

            .gold-today {
                width: 3.44rem;
                height: 1.66rem;
                border-radius: 0.16rem;
                background-color: #ffffff;

                .today-bottom-good {
                    display: flex;
                    height: 1.1rem;

                    .today-main {
                        width: 0.96rem;
                        height: 0.96rem;
                        margin-left: 0.2rem;
                        border-radius: 0.16rem;
                    }

                    .today-desc {
                        height: 0.96rem;
                        margin-left: 0.1rem;

                        .good-name {
                            height: 0.34rem;
                            width: 1.92rem;
                            margin-top: 0.08rem;
                            margin-bottom: 0.12rem;
                            line-height: 0.34rem;
                            font-weight: 400;
                            font-size: 0.24rem;
                            color: #333333;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            word-break: break-all;
                        }

                        .good-sale {
                            height: 0.34rem;
                            margin-left: 0.06rem;
                            line-height: 0.34rem;
                            font-size: 0.24rem;
                            font-weight: 500;
                            color: #F32A23;
                        }
                    }
                }

            }
        }
    }

    .good-ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.14rem 0.24rem 0;
    }

    .empty-good {
        padding-top: 1rem;
    }

    .banner1 {
        width: 95%;
        margin: 0 auto;
        margin-top: 0.1rem;

        img {
            width: 100%;
        }
    }
}

.zhuan_qu {
    width: 95%;
    height: 3.6rem;
    margin: .2rem auto;
    border-radius: .16rem;
    background: #fff;

    .private {
        .gold-top {
            height: .64rem;
            background: linear-gradient(180deg, rgba(255, 233, 213, 0.71) 0%, #FFFFFF 100%);
            border-radius: .16rem .16rem 0px 0px;
            display: flex;
            justify-content: space-between;
            padding: .2rem;
            box-sizing: border-box;

            .gold-recommend-icon-4 {
                width: 2.08rem;
                // margin-top: .1rem;
                height: .3rem;
            }

            .gold-recommend-icon-5 {
                width: 1.78rem;
                // margin-top: .1rem;
                height: .3rem;
            }

            div {
                height: .7rem;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #666666;
                text-align: left;
                font-style: normal;
            }
        }

        .banner2 {
            width: 95%;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            margin-top: .2rem;

            .private_item {
                width: 30% !important;

                // height: 0.8rem;
                img {
                    display: block;
                    width: 100%;
                    height: 2rem;
                    margin: 0 auto;
                    border-radius: .1rem;
                    margin-bottom: .2rem;
                }
            }

            div {
                width: 100%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .24rem;
                color: #333333;
                line-height: .34rem;
                text-align: center;
                font-style: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        }
    }


}
</style>